<template>
  <div class="whole-rent">
    <div class="header">
      <!--------- 顶部搜索框 ------->
      <van-search
        v-model="value"
        placeholder="请输入小区或地址"
        @search="onSearch"
        class="search"
      >
        <template #left>
          <van-icon
            name="arrow-left"
            class="leftArrow"
            @click="$router.back()"
          />
        </template>
        <template #label>
          <div @click="$router.push('/home/citylist')">
            {{ curentCity }}<span class="iconfont icon-arrow"></span>
          </div>
        </template>
      </van-search>
      <!-- 顶部搜索框右边图标 -->
      <span
        @click="$router.push('/map')"
        class="mapSearch iconfont icon-map"
      ></span>
      <!------ /顶部搜索框 --------->
      <!-- 查询条件栏 -->
      <seek-house @updateQueryParams="updateQueryParamsFn"></seek-house>
      <!-- /查询条件栏 -->
    </div>
    <div class="mian">
      <!-- 房屋展示列表 -->
      <van-card
        v-for="(item, index) in house"
        :key="index"
        :price="item.price"
        :desc="item.desc"
        :title="item.title"
        :thumb="`http://liufusong.top:8080${item.houseImg}`"
      >
        <template #tags>
          <van-tag
            plain
            type="danger"
            class="tags"
            v-for="(tagItem, index) in item.tags"
            :key="index"
            >{{ tagItem }}</van-tag
          >
        </template>
      </van-card>
      <!-- /房屋展示列表 -->
      <!-- 没有数据时的页面 -->
      <div class="not-found-page" v-if="house.length === 0">
        <van-image
          width="150px"
          height="98px"
          :src="require('@/assets/imgs/not-found.png')"
          class="img"
        />
        <p class="text">暂无房源</p>
      </div>
      <!-- /没有数据时的页面 -->
    </div>
  </div>
</template>

<script>
// 引入vuex
import { mapState, mapMutations } from 'vuex'
import SeekHouse from '@/views/home/components/SeekHousee.vue'
// 引入请求函数
import { queryHouseApi, getHouseConditionApi } from '@/api'

export default {
  name: 'wholeRent',
  components: { SeekHouse },
  props: {},
  data() {
    return {
      value: '',
      house: [],
      wholeRent: []
    }
  },
  computed: {
    ...mapState(['curentCityObj']),
    // 引入vuex中的当前城市变量，并在页面使用
    curentCity() {
      return this.$store.state.curentCity
    }
  },
  watch: {},
  created() {
    // console.log(this.$route.query.wholeRent)
    // 接收路由传参
    this.wholeRent = this.$route.query.wholeRent
    this.queryHouseFn()
    this.getHouseConditionFn()
  },
  methods: {
    ...mapMutations(['gethouseCondition']),
    ...mapMutations(['getQueryParams']),
    onSearch(val) {
      this.$toast(val)
    },
    onMapSearch() {},
    // 根据地区城市id查询房屋
    async queryHouseFn() {
      try {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        })
        if (!this.wholeRent) {
          // 1、使用城市id查询条件发起请求，保证页面可以自行初始化
          const { data } = await queryHouseApi({
            cityId: this.curentCityObj.value
          })
          // console.log(data)
          // 2、保存数据渲染页面
          this.house = data.body.list
          // 3、更新一下本地数据和vuex查询条件
          // 同时第一次进入或者重新加载都初始化查询条件
          this.getQueryParams({
            //合成的查询条件
            cityId: this.curentCityObj.value,
            area: null,
            subway: null,
            price: null,
            rentType: null,
            start: 1,
            end: 200,
            more: null
          })
        } else {
          this.house = this.wholeRent
          // 3、更新一下本地数据和vuex查询条件
          // 同时第一次进入或者重新加载都初始化查询条件
          this.getQueryParams({
            //合成的查询条件
            cityId: this.curentCityObj.value,
            area: null,
            subway: null,
            price: null,
            rentType: this.$route.query.nextType, //rentType是通过路由传过来的
            start: 1,
            end: 200,
            more: null
          })
        }
      } catch (err) {
        this.$toast.fail('加载失败，请重试')
      }
    },
    //根据区域城市id获取房屋查询条件
    async getHouseConditionFn() {
      const { data } = await getHouseConditionApi({
        id: this.curentCityObj.value
      })
      // console.log('房屋查询条件：',data.body)
      this.gethouseCondition(data.body)
    },
    // 子组件选择好合成的查询条件以后更新本页数据重新渲染页面
    updateQueryParamsFn(newArr) {
      this.house = newArr
    }
  }
}
</script>

<style scoped lang="less">
.whole-rent {
  position: relative;
  padding-bottom: 100px;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  .mian {
    padding-top: 210px;
  }
  .search {
    position: relative;
    background-color: #21b97a;
    padding: 0.26667rem 1.5rem 0.26667rem 1.32rem;
    .van-search__label {
      color: #7f7f80;
    }
    .leftArrow {
      position: absolute;
      left: 10px;
      color: #fff;
    }
  }
  .iconfont.mapSearch {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 50px;
    color: #fff;
  }
  .selectRow {
    height: 80px;
    border-bottom: 1px solid #e4e6f0;
    .active {
      color: red;
    }
  }
  .col-item {
    text-align: center;
    line-height: 80px;
    .text {
      font-size: 36px;
    }
    .icon-arrow {
      color: #bbb;
    }
  }
  :deep(.van-card__title) {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #394043;
  }
  :deep(.van-card__desc) {
    font-size: 24px;
    color: #afb2b3;
  }
  .tags {
    color: #39becd;
    background: #e1f5f8;
  }
  .van-card__price {
    font-size: 12px;
    color: #fa5741;
  }
}
.not-found-page {
  text-align: center;
  .img {
    margin: 60px 0;
  }
  .text {
    font-size: 28px;
    .publish {
      color: #21b97a;
    }
  }
}
</style>
